<template>
  <q-header elevated>
    <q-toolbar>
      <q-btn
        flat
        dense
        round
        icon="menu"
        aria-label="Menu"
        @click="leftDrawerOpen = !leftDrawerOpen"
      />

      <q-toolbar-title> Quasar-admin-page </q-toolbar-title>

      <q-btn flat round dense icon="search" class="q-mr-xs" />
      <q-btn flat round dense icon="light" class="q-mr-xs" @click="$q.dark.toggle()" />
      <q-btn flat round dense icon="manage_accounts" color="warning" class="q-mr-xs" />
    </q-toolbar>
    <!-- 标签页 -->
    <TabsBar align="left" />
  </q-header>
</template>

<script setup lang="ts">
import { watch } from 'vue'
import { useQuasar } from 'quasar'
import { useTabsStore } from 'src/stores/tabsStore'
import { useRoute } from 'vue-router'
import TabsBar from './TabsBar.vue'
defineOptions({
  name: 'HeaderPage',
})

const $q = useQuasar()
const route = useRoute()
const tabsStore = useTabsStore()

const leftDrawerOpen = defineModel('leftDrawerOpen', {
  type: Boolean,
  default: false,
})

watch(
  () => route.path,
  () => {
    tabsStore.addTab(route)
  },
  {
    immediate: true,
  },
)
</script>

<style scoped></style>
